<template>
<!-- 首页的顶部轮播图 -->
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <!-- <div class="swiper-slide">111</div>
            <div class="swiper-slide">222</div>
            <div class="swiper-slide">333</div> -->
            <slot></slot>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>
    </div>
</template>
<script>
// 一旦用了Swiper插件，则需要import引入swiper/swiper-bundle.js和swiper/swiper-bundle.min.css
import Swiper from "swiper/swiper-bundle.js"//引入js
import "swiper/swiper-bundle.min.css"//引入css
export default {

    // 在updated时引用Swiper，从而应用轮播图
    updated(){
        new Swiper(".swiper-container",{
            loop:true,
            autoPlay:true,
            // 如果需要分页器
            pagination: {
                el: '.swiper-pagination',
            },
        })
    }
}
</script>
<style lang="scss" scoped>
.swiper-wrapper img{
    width:100%
}
</style>



